<template>

  <div class="qualification-pic-info-card">
    <p class="licenceCardTitle">
      <span class="title-text">{{ licenceType === 'normal'? (cardDataProp.licenceTypeStr || cardDataProp.licenceName):cardDataProp.certificateNo }}</span>
      <el-checkbox
        class="cardCheck"
        @change="sendOutIdx"
        v-if="computeSelOps"
        v-model="cardDataProp.checked"/>
      <span
        class="deleteCard"
        v-if="computeDeleteOps"
        @click="deleteCurPic"> &times;</span>
    </p>
    <div class="licenceDetail">
      <i
        v-if="!licenceUrl"
        class="iconfont iconpdf"/>
      <div
        v-if="isPdf"
        @click="toPreview(licenceUrl)"
        :url="pdfFace">
        <el-image
          :src="pdfFace"
          :fit='fitType'/>
      </div>
      <div
        v-viewer
        v-else
        :url="licenceUrl">
        <el-image
          :src="licenceUrl"
          :fit='fitType'/>
      </div>
      <div
        class="info-body"
        v-show='licenceType === "normal"'>
        <custom-tooltip
          label="有效期从"
          :value="formatDateTime(cardDataProp.startDate)" />
        <!-- <custom-tooltip
          label="截止日期"
          :value="formatDateTime(cardDataProp.endDate)" /> -->
        <custom-tooltip
          v-if="!isExpire"
          label="截止日期"
          :value="formatDateTime(cardDataProp.endDate)" />
        <div
          v-else
          style="color: red;">
          <span style="color: #999; cursor: pointer;">
            有效期至
          </span>
          {{ formatDateTime(cardDataProp.endDate) }}
        </div>
        <custom-tooltip
          label="长期有效"
          :value="cardDataProp.effectiveness===0 ?'否':'是'" />
        <custom-tooltip
          label="证件编号"
          :value="cardDataProp.licenceCode" />
        <custom-tooltip
          label="证件名称"
          :value="cardDataProp.licenceName" />
      </div>
      <div
        class="info-body"
        v-show='licenceType === "register"'>
        <custom-tooltip
          label="产品名称"
          :value="cardDataProp.productNameCN" />
        <custom-tooltip
          v-if="!isExpire"
          label="有效期至"
          :value="formatDateTime(cardDataProp.expireDate)" />
        <div
          v-else
          style="color: red;">
          <span style="color: #999; cursor: pointer;">
            有效期至
          </span>
          {{ formatDateTime(cardDataProp.expireDate) }}
        </div>
        <custom-tooltip
          label="注册人名称"
          :value="cardDataProp.registrantName" />
        <custom-tooltip
          label="生产企业"
          :value="cardDataProp.manufacturer" />
        <custom-tooltip
          label="类型"
          :value="cardDataProp.type === 0?'国产':'进口'" />
      </div>
    </div>
  </div>
</template>
<script>
import { fitType } from '@const/common.js'
import { formatDate } from '@const/filter'
// 定制化的tooltip
import CustomTooltip from '@components/custom-tooltip'
export default {
  name: 'QualificationPicInfoCard',
  components: { CustomTooltip },
  data () {
    return {
      pdfFace: require('@assets/img/pdf.png'),
      fitType,
      cardDataProp: this.cardData
    }
  },
  watch: {
    cardData (val) {
      this.cardDataProp = val
    }
  },
  computed: {
    isExpire () {
      let time = this.cardDataProp.endDate || this.cardDataProp.expireDate
      if (this.cardDataProp.effectiveness) {
        return false
      }
      return time < new Date().getTime()
    },
    computeDeleteOps () {
      if (this.cardType === '0' || this.cardType === '3') {
        return true
      }
      return false
    },
    computeSelOps () {
      if (this.cardType === '1' || this.cardType === '3') {
        return true
      }
      return false
    },
    licenceUrl () {
      return this.licenceType === 'normal' ? this.cardDataProp.url : this.cardDataProp.pictureUrl
    },
    isPdf () {
      if (this.licenceUrl && this.licenceUrl.includes('.pdf')) {
        return true
      } else {
        return false
      }
    }
  },
  props: {
    cardData: {
      default () {
        return {}
      },
      type: Object,
      required: true
    },
    // '0'为删除，'1'为添加，'2'为默认值，什么都不传就是只读,新增加第三种状态，即可选中，亦可删除。即cardType为3
    cardType: {
      type: String,
      default: '2'
    },
    // 图片类型，{'company':'0','product':'1','register':'2'}
    picType: {
      type: String,
      default: ''
    },
    licenceType: {
      type: String,
      default: 'normal'
    },
    idx: {
      type: Number,
      default: 0
    },
    // 是否显示checkbox，即是否可选中，默认false
    isCheck: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toPreview (url) {
      this.$pdfViewer({
        url: url,
        title: '预览',
        isPrint: true
      })
    },
    formatDateTime (time) {
      return formatDate(time, 'YYYY-MM-DD')
    },
    sendOutIdx () {
      this.$emit('sendIdx', this.idx)
    },
    deleteCurPic () {
      this.$emit('sendDelete', this.idx, this.picType)
    }
    // sendOutPutId (checked, url) {
    //   console.log(checked,url)
    //   this.$emit('sendOutPutId', { checked, url })
    // }
  },
  mounted () {

  }
}
</script>
<style lang="less">
    .qualification-pic-info-card {
      width: 100%;
      height: 100%;
      position: relative;

      .licenceCardTitle {
        margin-bottom: 24px;
        height: 20px;
        width: 100%;
      }

      .title-text {
        display: inline-block;
        width: 100%;
        margin-right: -20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .cardCheck {
        position: absolute;
        right: 30px;
        top: 0;
        line-height: 50px;
      }

      .deleteCard {
        position: absolute;
        display: inline-block;
        right: 0;
        top: 0;
      }

      .licenceDetail {
        width: 100%;
        height: 100%;
        display: flex;

        .info-body {
          width: 160px;
        }

        .el-image {
          margin-right: 10px;
          width: 174px;
          height: 120px;
        }

        .card-name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        p span:first-child {
          color: #93a0b2;
          margin-right: 4px;
        }
      }

      .iconpdf {
        color: #ccc;
        font-size: 90px;
        width: 168px;
      }
    }
</style>
